<template>
  <!-- <h3>{{ { myTotal, myCurrentPage, myPageSize, btnCount } }}</h3> -->
  <!-- <h2>{{ pager }}</h2> -->
  <div class="xtx-pagination">
    <a
      href="javascript:;"
      :class="{ disabled: myCurrentPage <= 1 }"
      @click="changePage(myCurrentPage - 1)"
      >上一页</a
    >
    <span v-if="pager.start > 1">...</span>
    <a
      v-for="i in pager.btnArr"
      :key="i"
      href="javascript:;"
      :class="{ active: myCurrentPage === i }"
      @click="changePage(i)"
      >{{ i }}</a
    >
    <span v-if="pager.end < pager.pageCount">...</span>
    <a
      href="javascript:;"
      @click="changePage(myCurrentPage + 1)"
      :class="{ disabled: myCurrentPage >= pager.pageCount }"
      >下一页</a
    >
  </div>
</template>
<script>
import { computed, ref, watch } from 'vue'
/*
总条数 props    myTotal
当前页码        myCurrentPage
页容量          myPageSize
按钮个数        btnCount
分页信息（动态计算）   pager
总页数          pageCount
起始按钮        start
结束按钮        end
按钮数组（生成哪些编号）       btnArr
*/

export default {
  name: 'XtxPagination',
  props: {
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  emits: ['current-page'],
  setup (props, { emit }) {
    // 页面总条数
    const myTotal = ref(props.total)
    // 当前页码
    const myCurrentPage = ref(props.currentPage)
    // 页容量
    const myPageSize = ref(props.pageSize)
    // 按钮个数
    const btnCount = 5
    // 侦听父组件传过来的数据变化
    watch(props, () => {
      // 分别修改对应的总条数、当前页码值和页容量
      myTotal.value = props.total
      myCurrentPage.value = props.currentPage
      myPageSize.value = props.pageSize
    })
    // 分页信息
    const pager = computed(() => {
      // 总页数，总页数为总条数除以页容量再向上取整
      const pageCount = Math.ceil(myTotal.value / myPageSize.value)
      // 开始按钮，开始按钮值为当前页码-按钮个数/2并向下取整
      let start = myCurrentPage.value - Math.floor(btnCount / 2)
      //   💥💥💥💥左按钮 边界处理

      // 如果开始值小于1，取值为一
      if (start < 1) {
        start = 1
        // end = (start + btnCount - 1) > pageCount ? pageCount : (start + btnCount - 1)
      }

      // 结束值为开始值加上按钮的个数-1
      let end = start + btnCount - 1
      //   💥💥💥💥右按钮 边界处理

      // 如果结束值大于总页数，那么结束值最大取总页数的值
      if (end > pageCount) {
        end = pageCount
        // 当前页码为结束值时，按钮个数只能显示3个
        // 为了解决上面的问题，需要根据结算值重新计算起始值，起始值为结束值-按钮个数+1，但是当起始值小于1时，最小只能取值1
        start = end - btnCount + 1 < 1 ? 1 : end - btnCount + 1
      }

      // 按钮显示编码的数组
      const btnArr = []
      // 从起始开始遍历到结算值显示即可
      for (let i = start; i <= end; i++) {
        btnArr.push(i)
      }
      return { pageCount, start, end, btnArr }
    })
    // 页码改变点击事件
    const changePage = (page) => {
      // 🧨🧨🧨当出现以下三种情况时不能再执行页码点击事件了：1.0  起始值小于1  2.0 结束值大于总页数   3.0 当前页时
      if (page < 1 || page > pager.value.pageCount || myCurrentPage.value === page) return
      // 其他情况改变当前选中页码
      myCurrentPage.value = page
      // 将当前页码传出去给父组件
      emit('current-page', page)
    }
    return { myCurrentPage, pager, changePage }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
